<html>

<head>
    <meta charset="utf-8">
    <title>快速注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" type="text/css" href="__HOME__/css/public.css" />
    <link rel="stylesheet" type="text/css" href="__HOME__/css/register_step.css"/>
    <script type="text/javascript" src="__HOME__/js/jquery.js"></script>
</head>
<body>
  <div class="step1">
    <div class="top">
        <p>快速注册</p>
    </div>
    <div class="bottom">
        <p class="input"><input id="phoneNum" placeholder="请输入手机号" onkeyup="checkInput()"></p>
        <p class="input"><input id="passWord" type="passWord" placeholder="请输入验证码" onkeyup="checkInput()"><input id="zphone" type="button" value="获取验证码 " onclick="sendcode(this)" class="zphone"></p>
        <p class="btn_next"><span>下一步</span></p>
    </div>
  </div>
  <div class="step2" style="display: none;">
    <div class="top">
        <p>快速注册</p>
    </div>
    <div class="bottom">
        <p class="input clearfix"><a id="sel_city" style="display: inline-block;"><input id="selece_address" placeholder="选择省市区" onchange="checkInput1()"></a><img style="width: 17px;display: inline-block;" class="fr" src="./images/icon/icon_address.png"></p>
       <p class="input"><input id="passWord" type="passWord" placeholder="请输入验证码" onkeyup="checkInput()"><input id="zphone" type="button" value="获取验证码 " onclick="sendcode(this)" class="zphone"></p>
        <p class="btn_register"><span>注册</span></p>
    </div>
  </div>
</body>

</html>
<script type="text/javascript">
    $(".btn_next").click(function(){
        if($(".btn_next").hasClass("active")){
            vailPhone();
        }
           
    });
    $(".btn_register").click(function(){
        vailPhone1();   
    });
   function checkInput(){
        var phoneNum=$("#phoneNum").val();
        var passWord=$("#passWord").val();
        if (phoneNum && passWord) {
            $(".btn_next").addClass("active");
        }else{
            $(".btn_next").removeClass("active");
        }
   }
   function checkInput1(){
        var selece_address=$("#selece_address").val();
        var detail_address=$("#detail_address").val();
        if (selece_address && detail_address) {
            $(".btn_register").addClass("active");
        }else{
            $(".btn_register").removeClass("active");
        }
   }
   //验证手机号
    function vailPhone(){
      var phone = $("#phoneNum").val();
      var passWord=$("#passWord").val();
      var flag = false;
      var message = "";
      // var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;   
      var myreg =/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/ ;   
      if(phone == ''){
        message = "手机号码不能为空！";
      }else if(phone.length !=11){
        message = "请输入有效的手机号码！";
      }else if(!myreg.test(phone)){
        message = "请输入有效的手机号码！";
      }else if(passWord== ''){
        message = "验证码不能为空！";
      }else{
          flag = true;
      }
      if(!flag){
        //提示错误效果
        alert(message);
      }else{
       //正确后发送请求
         $(".btn_next").click(function(){
             // window.location.href="register_step2.html";
             $(".step1").hide();
             $(".step2").show();
         });
        
      }
      return flag;
    }
    //发送验证码
     function sendcode(o){
      //var code=$.trim($('#passWord').val());
    var phone = $("#phoneNum").val();
    console.log(phone);
      countdown(o);
       $.ajax({
         url:'/Register/do_register_step',
         type:'post',
         dataType:'json',
         data:{"tel":phone},
         success:function(res){
           if(res.status==1||res.status==0){
             countdown(o);
           }else{
             alert(res.msg);
           }
         }
       })
      
    }
     //验证地址
    function vailPhone1(){
      var phone = $("#phoneNum").val();
      var passWord=$("#passWord").val();
      var selece_address = $("#selece_address").val();
      var detail_address=$("#detail_address").val();
      var flag = false;
      var message = "";     
      if(selece_address == ''){
        message = "请选择省市区！";
      }else if(detail_address== ''){
        message = "请输入详细地址！";
      }else{
          flag = true;
      }
      if(!flag){
        //提示错误效果
        alert(message);
      }else{
       //正确后发送请求
        // $.ajax({
            //   type: "post",
            //      url: "",
            //      data: {"phone":phone,"passWord":passWord,"selece_address":selece_address, "detail_address":detail_address},
            //      dataType: "json",
            //      success: function(data){}
            // });
      }
      return flag;
      function sendcode(o){
      //var code=$.trim($('#passWord').val());
    var phone = $("#phoneNum").val();
    console.log(phone);
      countdown(o);
       $.ajax({
         url:'/Register/do_register_step1',
         type:'post',
         dataType:'json',
         data:{"tel":phone},
         success:function(res){
           if(res.status==1||res.status==0){
             countdown(o);
           }else{
             alert(res.msg);
           }
         }
       })
      
    }
    // }
    // function sendcode(o){
    //   var code=$.trim($('#passWord').val());
    //   countdown(o);
      // $.ajax({
      //   url:'/index.php?m=Mobile&c=User&a=send_validate_code&t='+Math.random(),
      //   type:'post',
      //   dataType:'json',
      //   data:{code:code},
      //   success:function(res){
      //     if(res.status==1||res.status==0){
      //       countdown(o);
      //     }else{
      //       alert(res.msg);
      //     }
      //   }
      // })
      
    // }

    var wait = 60;
    function countdown(obj, msg) {
      obj = $(obj);
      if (wait == 0) {
        obj.removeAttr("disabled");
        obj.val(msg);
        wait = 150;
      } else {
        if (msg == undefined || msg == null) {
          msg = obj.val();
        }
        obj.attr("disabled", "disabled");
        obj.val(wait + "秒后获取");
        wait--;
        setTimeout(function() {
          countdown(obj, msg)
        }, 1000)
      }
    }
</script>
<!-- 选择省市区 -->
<script src="__HOME__/js/picker.min.js"></script>
<script src="__HOME__/js/city.js"></script>
<script>
var nameEl = document.getElementById('selece_address');

var first = []; /* 省，直辖市 */
var second = []; /* 市 */
var third = []; /* 镇 */

var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */

var checked = [0, 0, 0]; /* 已选选项 */

function creatList(obj, list){
  obj.forEach(function(item, index, arr){
  var temp = new Object();
  temp.text = item.name;
  temp.value = index;
  list.push(temp);
  })
}

creatList(city, first);

if (city[selectedIndex[0]].hasOwnProperty('sub')) {
  creatList(city[selectedIndex[0]].sub, second);
} else {
  second = [{text: '', value: 0}];
}

if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
  creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
} else {
  third = [{text: '', value: 0}];
}

var picker = new Picker({
    data: [first, second, third],
  selectedIndex: selectedIndex,
    title: '地址选择'
});

picker.on('picker.select', function (selectedVal, selectedIndex) {
  var text1 = first[selectedIndex[0]].text;
  var text2 = second[selectedIndex[1]].text;
  var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';

    nameEl.value = text1 + ' ' + text2 + ' ' + text3;
});

picker.on('picker.change', function (index, selectedIndex) {
  if (index === 0){
    firstChange();
  } else if (index === 1) {
    secondChange();
  }

  function firstChange() {
    second = [];
    third = [];
    checked[0] = selectedIndex;
    var firstCity = city[selectedIndex];
    if (firstCity.hasOwnProperty('sub')) {
      creatList(firstCity.sub, second);

      var secondCity = city[selectedIndex].sub[0]
      if (secondCity.hasOwnProperty('sub')) {
        creatList(secondCity.sub, third);
      } else {
        third = [{text: '', value: 0}];
        checked[2] = 0;
      }
    } else {
      second = [{text: '', value: 0}];
      third = [{text: '', value: 0}];
      checked[1] = 0;
      checked[2] = 0;
    }

    picker.refillColumn(1, second);
    picker.refillColumn(2, third);
    picker.scrollColumn(1, 0)
    picker.scrollColumn(2, 0)
  }

  function secondChange() {
    third = [];
    checked[1] = selectedIndex;
    var first_index = checked[0];
    if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
      var secondCity = city[first_index].sub[selectedIndex];
      creatList(secondCity.sub, third);
      picker.refillColumn(2, third);
      picker.scrollColumn(2, 0)
    } else {
      third = [{text: '', value: 0}];
      checked[2] = 0;
      picker.refillColumn(2, third);
      picker.scrollColumn(2, 0)
    }
  }

});

picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
  console.log(selectedVal);
  console.log(selectedIndex);
});

nameEl.addEventListener('click', function () {
    picker.show();
});
</script>